﻿@page "/"
@using Aspire.Dashboard.Components.ResourcesGridColumns
@using Aspire.Dashboard.Resources
@using Aspire.Dashboard.Utils
@using System.Globalization
@using Aspire.Dashboard.Components.Controls.Grid
@using Aspire.Dashboard.Model
@using Humanizer
@inject IStringLocalizer<Dashboard.Resources.Resources> Loc
@inject IStringLocalizer<ControlsStrings> ControlsStringsLoc
@inject IStringLocalizer<Columns> ColumnsLoc

<PageTitle><ApplicationName ResourceName="@nameof(Dashboard.Resources.Resources.ResourcesPageTitle)" Loc="@Loc" /></PageTitle>

@{
    var showDetailsView = SelectedResource is not null;
}

<div class="page-content-container">
    <AspirePageContentLayout IsSummaryDetailsViewOpen="@showDetailsView">
        <PageTitleSection>
            <h1 class="page-header">@Loc[nameof(Dashboard.Resources.Resources.ResourcesHeader)]</h1>
        </PageTitleSection>

        <ToolbarSection>
            <FluentSearch Placeholder="@ControlsStringsLoc[nameof(ControlsStrings.FilterPlaceholder)]"
                          Immediate="true"
                          ImmediateDelay="@FluentUIExtensions.InputDelay"
                          @bind-Value="_filter"
                          slot="end"
                          Label="@(ViewportInformation.IsDesktop ? null : ControlsStringsLoc[nameof(ControlsStrings.FilterPlaceholder)].Value)"
                          @bind-Value:after="HandleSearchFilterChangedAsync" />
            <FluentDivider slot="end" Role="DividerRole.Presentation" Orientation="Orientation.Vertical" />
            @if (ViewportInformation.IsDesktop)
            {
                <FluentButton id="typeFilterButton" slot="end"
                              Appearance="@(AreAllTypesVisible is true ? Appearance.Stealth : Appearance.Accent)"
                              IconEnd="@(new Icons.Regular.Size20.Filter())"
                              @onclick="() => _isTypeFilterVisible = !_isTypeFilterVisible"
                              Title="@(AreAllTypesVisible is true ? Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFilterAllVisible)] : Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFiltered)])"
                              aria-label="@(AreAllTypesVisible is true ? Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFilterAllVisible)] : Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeFiltered)])" />
            }
            else
            {
                <div>
                    <h5>@Loc[nameof(Dashboard.Resources.Resources.ResourcesResourceTypesHeader)]</h5>

                    <SelectResourceTypes AllResourceTypes="_allResourceTypes"
                                         VisibleResourceTypes="_visibleResourceTypes"
                                         OnAllResourceTypesCheckedChangedAsync="@OnAllResourceTypesCheckedChangedAsync"
                                         AreAllTypesVisible="@(() => AreAllTypesVisible)"
                                         OnResourceTypeVisibilityChangedAsync="@OnResourceTypeVisibilityChangedAsync" />
                </div>
            }
        </ToolbarSection>

        <MainSection>
            <FluentPopover AnchorId="typeFilterButton" @bind-Open="_isTypeFilterVisible" AutoFocus="true" FixedPlacement="true">
                <Header>@Loc[nameof(Dashboard.Resources.Resources.ResourcesResourceTypesHeader)]</Header>
                <Body>
                    <SelectResourceTypes AllResourceTypes="_allResourceTypes"
                                         VisibleResourceTypes="_visibleResourceTypes"
                                         OnAllResourceTypesCheckedChangedAsync="@OnAllResourceTypesCheckedChangedAsync"
                                         AreAllTypesVisible="@(() => AreAllTypesVisible)"
                                         OnResourceTypeVisibilityChangedAsync="@OnResourceTypeVisibilityChangedAsync" />
                </Body>
            </FluentPopover>

            <SummaryDetailsView DetailsTitle="@(SelectedResource != null ? $"{SelectedResource.ResourceType}: {GetResourceName(SelectedResource)}" : null)"
                                ShowDetails="@showDetailsView"
                                OnDismiss="@(() => ClearSelectedResourceAsync(causedByUserAction: true))"
                                SelectedValue="@SelectedResource"
                                ViewKey="ResourcesList"
                                OnResize="@(r => _manager.SetWidthFraction(r.Orientation == Orientation.Horizontal ? r.Panel1Fraction : 1))">
                <Summary>
                    <GridColumnManager @ref="_manager" Columns="@_gridColumns">
                        <FluentDataGrid @ref="_dataGrid"
                                        ResizeLabel="@AspireFluentDataGridHeaderCell.GetResizeLabel(ControlsStringsLoc)"
                                        ResizeType="DataGridResizeType.Discrete"
                                        Virtualize="true"
                                        GenerateHeader="GenerateHeaderOption.Sticky"
                                        ItemSize="46"
                                        ItemsProvider="@GetData"
                                        ResizableColumns="true"
                                        GridTemplateColumns="@_manager.GetGridTemplateColumns()"
                                        RowClass="@(r => GetRowClass(r.Resource))"
                                        Loading="_isLoading"
                                        ShowHover="true"
                                        TGridItem="ResourceGridViewModel"
                                        ItemKey="@(r => r.Resource.Name)"
                                        OnRowClick="@(r => r.ExecuteOnDefault(d => ShowResourceDetailsAsync(d.Resource, buttonId: null)))"
                                        Class="main-grid enable-row-click">
                            <ChildContent>
                                <AspireTemplateColumn ColumnId="@NameColumn" ColumnManager="@_manager" Title="@ControlsStringsLoc[nameof(ControlsStrings.NameColumnHeader)]" Sortable="true" SortBy="@_nameSort" Tooltip="true" TooltipText="@(c => GetResourceName(c.Resource))" Class="expand-col">
                                    @{
                                        var indent = context.Depth * 16;
                                    }
                                    <span class="resources-name-container" style="margin-left: @(indent)px;">
                                        <span @onclick:stopPropagation="true" class="main-grid-expand-container @(context.IsCollapsed ? "main-grid-collapsed" : "main-grid-expanded")">
                                            @if (context.Children.Count > 0)
                                            {
                                                <FluentButton Appearance="Appearance.Lightweight" Class="main-grid-expand-button" OnClick="@(() => OnToggleCollapse(context))">
                                                    <FluentIcon Icon="Icons.Regular.Size12.ChevronRight" Color="Color.Neutral" />
                                                </FluentButton>
                                            }
                                        </span>
                                        <ResourceNameDisplay Resource="context.Resource" FilterText="@_filter" FormatName="GetResourceName" />
                                    </span>
                                </AspireTemplateColumn>
                                <AspireTemplateColumn ColumnId="@StateColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesStateColumnHeader)]" Sortable="true" SortBy="@_stateSort" Tooltip="true" TooltipText="@(c => ResourceStateViewModel.GetResourceStateTooltip(c.Resource, ColumnsLoc))">
                                    <StateColumnDisplay Resource="@context.Resource" UnviewedErrorCounts="@_applicationUnviewedErrorCounts" />
                                </AspireTemplateColumn>
                                <AspireTemplateColumn ColumnId="@StartTimeColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesStartTimeColumnHeader)]" Sortable="true" SortBy="@_startTimeSort" TooltipText="@(context => context.Resource.CreationTimeStamp != null ? FormatHelpers.FormatDateTime(TimeProvider, context.Resource.CreationTimeStamp.Value, MillisecondsDisplay.None, CultureInfo.CurrentCulture) : null)" Tooltip="true">
                                    <StartTimeColumnDisplay Resource="@context.Resource" />
                                </AspireTemplateColumn>
                                <AspirePropertyColumn ColumnId="@TypeColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesTypeColumnHeader)]" Property="@(c => c.Resource.ResourceType)" Sortable="true" SortBy="@_typeSort" IsDefaultSortColumn="true" Tooltip="true" TooltipText="@(c => c.Resource.ResourceType)" />
                                <AspireTemplateColumn ColumnId="@SourceColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesSourceColumnHeader)]" Tooltip="true" TooltipText="@(ctx => GetSourceColumnValueAndTooltip(ctx.Resource)?.Tooltip)">
                                    @if (GetSourceColumnValueAndTooltip(context.Resource) is { } columnDisplay)
                                    {
                                        <SourceColumnDisplay FilterText="@_filter" Value="@columnDisplay.Value" ContentAfterValue="@columnDisplay.ContentAfterValue" ValueToCopy="@columnDisplay.ValueToCopy" Tooltip="@columnDisplay.Tooltip" />
                                    }
                                    else
                                    {
                                        <span class="empty-data"></span>
                                    }
                                </AspireTemplateColumn>
                                <AspireTemplateColumn ColumnId="@EndpointsColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesEndpointsColumnHeader)]" Tooltip="true" TooltipText="@(ctx => GetEndpointsTooltip(ctx.Resource))">
                                    <EndpointsColumnDisplay Resource="context.Resource"
                                                            HasMultipleReplicas="HasMultipleReplicas(context.Resource)"
                                                            DisplayedEndpoints="GetDisplayedEndpoints(context.Resource)" />
                                </AspireTemplateColumn>
                                <AspireTemplateColumn ColumnId="@ActionsColumn" ColumnManager="@_manager" Title="@Loc[nameof(Dashboard.Resources.Resources.ResourcesActionsColumnHeader)]" Class="no-ellipsis">
                                    <div class="grid-action-container" @onclick:stopPropagation="true">
                                        <ResourceActions Commands="@context.Resource.Commands"
                                                         CommandSelected="async (command) => await ExecuteResourceCommandAsync(context.Resource, command)"
                                                         OnViewDetails="@((buttonId) => ShowResourceDetailsAsync(context.Resource, buttonId))"
                                                         Resource="context.Resource"
                                                         GetResourceName="GetResourceName"
                                                         MaxHighlightedCount="_maxHighlightedCount" />
                                    </div>
                                </AspireTemplateColumn>
                            </ChildContent>
                            <EmptyContent>
                                <FluentIcon Icon="Icons.Regular.Size24.AppGeneric" />&nbsp;@Loc[nameof(Dashboard.Resources.Resources.ResourcesNoResources)]
                            </EmptyContent>
                        </FluentDataGrid>
                    </GridColumnManager>
                </Summary>
                <Details>
                    <ResourceDetails Resource="context" ShowSpecOnlyToggle="true" />
                </Details>
            </SummaryDetailsView>
        </MainSection>
    </AspirePageContentLayout>
</div>
